{% extends 'Base.html' %}
{% load static %}
{% block pagetitle %}影院详情{% endblock %}
{% block content %}
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=z4P4H2iazLQ4mfsloV8GsOsj1SKxFLqZ"></script>
    <style>
        .cinema_tilte{
            width:100%;
            background-color: #1e212d;
        }
        .cine_imge{
            margin-right:auto;
            margin-left:auto;
            margin-top:20%;
            background-image:url({{ cin_imag }});
            background-repeat: no-repeat;
            background-position:center center;
            background-size: cover;
            width:250px;
            height:270px;
        }
        .cine_listimg{
            background-repeat: no-repeat;
            background-position:center center;
            background-size: cover;
            width: 100px;
            height: 130px;
        }
        .cinlist{
            display: flex;
            flex-direction: column;
            width: 120px;
            height: 180px;
            justify-content: center;
            align-items: center;
        }
        .cinlist:hover span{

        }
        .list-group-item{
            cursor: pointer;
        }
        .list-group-item:hover{
            background-color: #ff9292;
            border-width: 2px;
            border-color: #da7f8f;
        }
        .list-group-item.active{
            background-color: #ff9292;
            border-width: 2px;
            border-color: #da7f8f;
        }
        .cinematitle{
            padding-top: 10px;
            padding-left: 20px;
            background-color: white;
        }
        .list-group-item{
            background-color: #D8E3E7;
        }
        .btn_B:hover{
            opacity: 0.8;
        }
    </style>
    <div class="cinema_tilte">
        <div class="row" style="margin-bottom: 20px;">
            <div class="col-4">
                <div class="cine_imge" style="margin-top: 10px;"></div>
            </div>
            <div class="col-4">
                <div style="margin-top: 20px;">
                    <div id = "cin_name" style="color: #dddddd;font-size: 2rem;margin-left: auto;margin-right: auto;">{{cin_name}}</div>
                    <div id = "cin_addr" style="color: #dddddd;">
                        <strong>地址:</strong>
                        {{ cin_addr }}
{#                        <a style="text-decoration:none;color: white" href = "{% url 'position' %}?cinema_name={{ cin_name }}" >#}
{#                            {{ cin_addr }}#}
{#                        </a>#}
                        <a style="text-decoration:none;" href = "{% url 'distance' %}?cinema_name={{ cin_name }}" >
                            <img src="{% static "imag/distance.png" %}" width="40px">
                            路线
                        </a>
                    </div>

                    <div style="color: #dddddd;"><strong>联系电话:</strong>{{ cin_telphone }}</div>
                    <hr style="background-color: white;">
                    <div class="row">
                        <!--影院服务标签-->
                        {% autoescape off %}
                            {{ cin_label }}
                        {% endautoescape %}
                    </div>
                </div>
            </div>
            <div class="col-4">
                <!--地图-->
                <div id="mapbox" style="width: 100%;height: 100%;"></div>
            </div>
        </div>
        <div class="row" style="margin-bottom: 20px;background-color: #1e212d;">
            <!--电影条-->
            <ul class="list-group list-group-horizontal m-auto" style="margin-top:20px;border-radius: 0;">
                <li class="list-group-item" style="border-radius: 0;">
                    <div><<</div>
                </li>
                {% autoescape off %}
                    {{ mov_listline }}
                {% endautoescape %}
{#                <li class="list-group-item active">#}
{#                    <div class="cinlist">#}
{#                        <div class="cine_listimg" style="background-image:url({% static "imag/1921.jpg" %});"></div>#}
{#                        <div style="margin: auto;text-align: center">#}
{#                            <span style="margin: auto;font-weight: bold;">1921</span>#}
{#                        </div>#}
{#                    </div>#}
{##}
{#                </li>#}
{#                <li class="list-group-item">Morbi leo risus</li>#}
{#                <li class="list-group-item">Dapibus ac facilisis in</li>#}
{#                <li class="list-group-item">Morbi leo risus</li>#}
{#                <li class="list-group-item">Morbi leo risus</li>#}
{#                <li class="list-group-item">Morbi leo risus</li>#}

                <li class="list-group-item" style="border-radius: 0;">>></li>

            </ul>
        </div>
    </div>

    <!--电影场次信息标题-->
    <div class="container" style="background-color: white;border-style: solid;border-radius: 10px;border-width:0;">
        <div class="row">
            <div class="col-12 cinematitle" style="border-style:solid;border-width: 0 0 0 20px;border-color: #2b2e4a;height: 50px;background-color: #53354a;">
                <span style="font-size: 1.5rem;color: #eeebdd;">影院场次</span>
            </div>
        </div>

        <div class="row" style="color: #e84545;font-weight: bold;font-size: 1.3rem;text-align: center;margin-bottom: 20px;border-width: 0 0 2px 0;border-style: solid;">
            <div class="col-2">时间</div>
            <div class="col-2">类型</div>
            <div class="col-2">放映厅</div>
            <div class="col-2">售价</div>
            <div class="col-4">购票</div>
        </div>

        <div class="list_order" id="ordlist" style="margin-bottom: 20px;">
            {% autoescape off %}
                {{ orderlist }}
            {% endautoescape %}
            <div class="list_order_iterm row" id = ""style="color: #e84545;font-weight: bold;text-align: center;font-size: 1.3rem;">
                <div class="col-2">12:20</div>
                <div class="col-2">英语2D</div>
                <div class="col-2">1号厅</div>
                <div class="col-2">35.5￥</div>
                <div class="col-4">
                    <div class="btn_B" style="cursor: pointer;width: 100px;border-radius: 15px;background-color: #ff8882;color: black;margin: auto;">购票</div>
                </div>   <!--购票按钮-->
            </div>
            <hr style="background-color: #a7bbc7;height: 1px;">
{#            <div class="list_order_iterm row" style="color: #e84545;font-weight: bold;text-align: center;font-size: 1.3rem;">#}
{#                <div class="col-2">12:20</div>#}
{#                <div class="col-2">英语2D</div>#}
{#                <div class="col-2">1号厅</div>#}
{#                <div class="col-2">35.5￥</div>#}
{#                <div class="col-4">#}
{#                    <div class="btn_B" style="cursor: pointer;width: 100px;border-radius: 15px;background-color: #ff8882;color: black;margin: auto;">购票</div>#}
{#                </div>   <!--购票按钮-->#}
{#            </div>#}
{#            <hr style="background-color: #a7bbc7;height: 1px;">#}
{#            <div class="list_order_iterm row" style="color: #e84545;font-weight: bold;text-align: center;font-size: 1.3rem;">#}
{#                <div class="col-2">12:20</div>#}
{#                <div class="col-2">英语2D</div>#}
{#                <div class="col-2">1号厅</div>#}
{#                <div class="col-2">35.5￥</div>#}
{#                <div class="col-4">#}
{#                    <div class="btn_B" style="cursor: pointer;width: 100px;border-radius: 15px;background-color: #ff8882;color: black;margin: auto;">购票</div>#}
{#                </div>   <!--购票按钮-->#}
{#            </div>#}
{#            <hr style="background-color: #a7bbc7;height: 1px;">#}
{#            <div class="list_order_iterm row" style="color: #e84545;font-weight: bold;text-align: center;font-size: 1.3rem;">#}
{#                <div class="col-2">12:20</div>#}
{#                <div class="col-2">英语2D</div>#}
{#                <div class="col-2">1号厅</div>#}
{#                <div class="col-2">35.5￥</div>#}
{#                <div class="col-4">#}
{#                    <div class="btn_B" style="cursor: pointer;width: 100px;border-radius: 15px;background-color: #ff8882;color: black;margin: auto;">购票</div>#}
{#                </div>   <!--购票按钮-->#}
{#            </div>#}
{#            <hr style="background-color: #a7bbc7;height: 1px;">#}

        </div>
    </div>
    <script type="text/javascript" src="{% static "js/cindetail.js" %}"></script>
    <script>
        function buytic(id){
            path= window.location.protocol+'//' + window.location.host+"/"+"buy/"+id+'/'
            window.location.href = path
        }
        $(document).ready(function (){
            e = $(".list-group").children().eq(1)
            changemov(e)
        })
        function changemov(e){
            //去掉active,显示对应场次表
            $(e).siblings().attr("class","list-group-item")
            old = $(e).attr("class")
            $(e).attr("class",old+" active")
            vid = $(e).attr("id")
            $("#ordlist").children().hide()
            $("#ordlist #"+vid).show()

        }
    </script>


{% endblock %}